<template>
	<div class="content">
		<Banner :bannerImg='bannerImg' :gallaryImgs='gallaryImgs' :sightName='sightName'></Banner>
		<Header></Header>
		<List :categoryList="categoryList"></List>
	</div>
</template>

<script>
import Banner from './components/Banner'
import Header from './components/Header'	
import List from './components/List'
import axios from 'axios'
export default {
	name: 'Detail',
	components: {
		Banner,
		Header,
		List
	},
	data () {
		return {
			sightName: '',
			bannerImg: '',
			gallaryImgs: [],
			categoryList: []
		}
	},
	methods: {
		getDetailData () {
			axios.get('/api/detail.json', {
				params: {
					id: this.$route.params.id
				}
			}).then(this.getDetailInfoSucc)
		},
		getDetailInfoSucc (res) {
			res = res.data
			if (res.ret && res.data) {
				this.sightName = res.data.sightName
				this.bannerImg = res.data.bannerImg
				this.gallaryImgs = res.data.gallaryImgs
				this.categoryList = res.data.categoryList
			}
		}
	},
	mounted () {
		this.getDetailData()
	},
	// activated () {
	// 	this.getDetailData()
	// }
}	
</script>

<style lang="stylus" scoped>
	.content
		height: 50rem
</style>